﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    EnableViewState="true" CodeFile="Transactions.aspx.cs" Inherits="Orders" Trace="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <style type="text/css">
        .StartCalendar
        {
            float: left;
        }
        .EndCalendar
        {
            float: left;
        }
        .TransactionProduct
        {
            display: none;
        }
        .TransactionDate
        {
            display: block;
        }
        table.CenteredTable
        {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var element = $(":radio:checked").val();
            if (element == "By product code")
                Byproductcode();
            if (element == "By date")
                Bydate();
        }
        function Bydate() {
            var elements = $(".TransactionProduct").css("display", "none");
            var elements = $(".TransactionDate").css("display", "block");
        }
        function Byproductcode() {
            var elements = $(".TransactionProduct").css("display", "block");
            var elements = $(".TransactionDate").css("display", "none");
        }
        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function () {
                $("#" + elementID).block({ message: '<table align = "center" class="StatusBar"><tr><td>' +
     '<img src="loadingAnim.gif"/></td></tr></table>',
                    css: {},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB'
                    }
                });
            });

            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }

        $(document).ready(function () {
            BlockUI("dvPanel");
            $.blockUI.defaults.css = {};
        });
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <h1 id="transactionsTitle" runat="server" style="text-align: center; text-decoration: underline;
        text-transform: capitalize; font-size: xx-large; font-weight: bolder; margin-bottom: 25px;">
        Transactions:</h1>
    <div id="dvPanel" style="padding-top: 10px; padding-bottom: 10px; width: 100%">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <table border="0" cellpadding="0" cellspacing="0" style="border-bottom: 1px dotted black;
                    border-top: 1px dotted black; width: 100%; text-align: left; vertical-align: top;">
                    <tr>
                        <td>
                            <asp:Label ID="lblSearchType" Text="Step 1: choose a way to search for transactions:"
                                runat="server" Style="" />
                            <asp:RadioButtonList ID="rblChooseOption" runat="server" Style="text-align: left;
                                margin-left: 0px;">
                                <asp:ListItem Text="By date" Selected="True" onclick="Bydate();" />
                                <asp:ListItem Text="By product code" onclick="Byproductcode();" />
                            </asp:RadioButtonList>
                        </td>
                        <td style="vertical-align: top;">
                            <asp:Label ID="lblDepartment" Text="Step 2: choose department you want to see transactions from:"
                                runat="server" /><br />
                            <asp:DropDownList runat="server" ID="ddlDepartments" EnableViewState="true">
                            </asp:DropDownList>
                            <br />
                        </td>
                        <td style="vertical-align: top;">
                            <asp:Label ID="lblProceed" Text="Step 3: proceed:" runat="server" /><br />
                            <asp:Button ID="btnProceed" Text="Proceed" runat="server" Style="color: Yellow; background-color: Blue;
                                font-weight: bold; margin-top: 10px; font-size: large;" OnClick="btnProceed_Click"
                                OnClientClick="DefineShow();" />
                        </td>
                    </tr>
                </table>
                <table id="TransactionDetails" class="CenteredTable" style="width: 100%; vertical-align: top;
                    display: none;" runat="server">
                    <tbody align="center">
                        <tr style="width: 100%;">
                            <td style="width: 100%; text-align: center;" class="TransactionProduct">
                                <asp:Label ID="lblProduct" Text="Step 4: choose a product to see its transactions:"
                                    runat="server" />
                            </td>
                            <td style="width: 100%; text-align: center;" class="TransactionDate">
                                <asp:Label ID="lblDate" Text="Step 4: choose a date to see transactions:" runat="server" />
                            </td>
                        </tr>
                        <tr style="vertical-align: top">
                            <td class="TransactionProduct">
                                <asp:ListView runat="server" ID="lvTransactions" EnableViewState="true" OnSelectedIndexChanging="lvTransactions_SelectedIndexChanging"
                                    DataSourceID="" DataKeyNames="productCode">
                                    <LayoutTemplate>
                                        <table runat="server" class="CenteredTable" id="tblCategories" cellspacing="0" cellpadding="1"
                                            width="440px" border="1">
                                            <thead class="header">
                                                <tr>
                                                    <th>
                                                        Amount
                                                    </th>
                                                    <th>
                                                        Name
                                                    </th>
                                                    <th>
                                                        ProductCode
                                                    </th>
                                                    <th>
                                                        Select row?
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tr id="itemPlaceholder" runat="server">
                                            </tr>
                                        </table>
                                    </LayoutTemplate>
                                    <ItemTemplate>
                                        <tr id="Tr1" runat="server">
                                            <td>
                                                <asp:Label runat="server" ID="Amount" Text='<%#Eval("amount") %>' />
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="Name" Text='<%#Eval("name") %>' />
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="ProductCode" Text='<%#Eval("productCode") %>' />
                                            </td>
                                            <td style="width: 85px">
                                                <asp:LinkButton runat="server" ID="SelectProductButton" Text="Select" CommandName="Select" />
                                            </td>
                                        </tr>
                                    </ItemTemplate>
                                    <SelectedItemTemplate>
                                        <tr id="Tr2" runat="server" style="background-color: #90EE90">
                                            <td>
                                                <asp:Label runat="server" ID="Amount" Text='<%#Eval("amount") %>' />
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="Name" Text='<%#Eval("name") %>' />
                                            </td>
                                            <td>
                                                <asp:Label runat="server" ID="ProductCode" Text='<%#Eval("productCode") %>' />
                                            </td>
                                            <td style="width: 85px">
                                                <asp:LinkButton runat="server" ID="SelectProductButton" Text="Select" CommandName="Select" />
                                            </td>
                                        </tr>
                                    </SelectedItemTemplate>
                                </asp:ListView>
                                <asp:Button Text="Get Transactions by product" ID="btnGetTransactionsByProduct" runat="server"
                                    OnClick="btnGetTransactionsByProduct_Click" />
                            </td>
                            <td class="TransactionDate">
                                <table class="CenteredTable">
                                    <tr style="vertical-align: top">
                                        <td>
                                            <asp:Label ID="Label2" Style="font-weight: bold; color: Red;" Text="Start date" runat="server" />
                                        </td>
                                        <td>
                                            <asp:Label ID="Label1" Style="font-weight: bold; color: Red;" Text="End date" runat="server" />
                                        </td>
                                    </tr>
                                    <tr style="vertical-align: top">
                                        <td>
                                            <asp:Calendar runat="server" ID="StartCalendar" BackColor="White" BorderColor="Black"
                                                DayNameFormat="Shortest" Font-Names="Times New Roman" Font-Size="10pt" ForeColor="Black"
                                                Height="220px" Width="400px" CssClass="StartCalendar" NextPrevFormat="FullMonth"
                                                ShowGridLines="True">
                                                <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" ForeColor="#333333"
                                                    Height="10pt" />
                                                <DayStyle Width="14%" />
                                                <NextPrevStyle Font-Size="8pt" ForeColor="White" />
                                                <OtherMonthDayStyle ForeColor="#999999" />
                                                <SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
                                                <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt"
                                                    ForeColor="#333333" Width="1%" />
                                                <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"
                                                    Height="14pt" />
                                                <TodayDayStyle BackColor="#CCCC99" />
                                            </asp:Calendar>
                                        </td>
                                        <td>
                                            <asp:Calendar runat="server" ID="EndCalendar" BackColor="White" BorderColor="Black"
                                                DayNameFormat="Shortest" Font-Names="Times New Roman" Font-Size="10pt" ForeColor="Black"
                                                Height="220px" Width="400px" CssClass="EndCalendar" NextPrevFormat="FullMonth"
                                                ShowGridLines="True">
                                                <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" ForeColor="#333333"
                                                    Height="10pt" />
                                                <DayStyle Width="14%" />
                                                <NextPrevStyle Font-Size="8pt" ForeColor="White" />
                                                <OtherMonthDayStyle ForeColor="#999999" />
                                                <SelectedDayStyle BackColor="#CC3333" ForeColor="White" />
                                                <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt"
                                                    ForeColor="#333333" Width="1%" />
                                                <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White"
                                                    Height="14pt" />
                                                <TodayDayStyle BackColor="#CCCC99" />
                                            </asp:Calendar>
                                        </td>
                                    </tr>
                                </table>
                                <asp:Button Text="Get Transactions by date" ID="btnGetTransactionsByDate" runat="server"
                                    OnClick="btnGetTransactionsByDate_Click" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div style="vertical-align: middle; text-align: center; margin-top: 50px; width: 100%">
                    <div>
                        <asp:GridView CssClass="CenteredTable" runat="server" ID="gvTransactions" BackColor="#CCCCCC"
                            BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2"
                            ForeColor="Black">
                            <FooterStyle BackColor="#CCCCCC" />
                            <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
                            <RowStyle BackColor="White" />
                            <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                            <SortedAscendingCellStyle BackColor="#F1F1F1" />
                            <SortedAscendingHeaderStyle BackColor="#808080" />
                            <SortedDescendingCellStyle BackColor="#CAC9C9" />
                            <SortedDescendingHeaderStyle BackColor="#383838" />
                            <EmptyDataTemplate>
                                <asp:Label ID="Label3" Text="No Transactions to be shown. Choose appropriate options from panel above."
                                    runat="server" />
                            </EmptyDataTemplate>
                        </asp:GridView>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>
